<%--
  Created by IntelliJ IDEA.
  User: 王一同
  Date: 2021/11/20
  Time: 12:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/index.css" media="all" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui/layui.js" charset="UTF-8"></script>
</head>
<body>
<div class="layui-collapse">
    <%--============================--%>
    <form class="layui-form" lay-filter="formTest">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">仓库组员(采购)业绩排行</h2>
            <div class="layui-colla-content layui-show">
<%--                <label class="layui-form-label" style="width: 30%">日期范围:</label>--%>
<%--                <div class="layui-input-inline">--%>
<%--                    <input type="text" class="layui-input" name="cpdate" id="test11" placeholder=" 请选择时间 " style="width: 300px">--%>
<%--                </div>--%>

<%--                <div class="layui-input-inline">--%>
<%--                    <button type="button" class="layui-btn" lay-submit=""  id="serachBtn0" style="margin-left: 6px;">立即查询</button>--%>
<%--                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
<%--                </div>--%>
                <div class="layui-colla-item">
                    <div class="layui-colla-content layui-show" style="width: 96%;height:50%;">
                        <div id="box4" style="width: 40%;height:100%;float: left;margin-left: 5%"></div>
                    </div>
                </div>
            </div>
        </div>
        <%--================--%>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">仓库组员(采购)业绩排行</h2>
            <div class="layui-colla-content layui-show">
<%--                <label class="layui-form-label" style="width: 30%">日期范围:</label>--%>
<%--                <div class="layui-input-inline">--%>
<%--                    <input type="text" class="layui-input" name="cpdate" id="test12" placeholder=" 请选择时间 " style="width: 300px">--%>
<%--                </div>--%>

<%--                <div class="layui-input-inline">--%>
<%--                    <button type="button" class="layui-btn" lay-submit=""  id="serachBtn1" style="margin-left: 6px;">立即查询</button>--%>
<%--                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
<%--                </div>--%>
                <div class="layui-colla-item">
                    <div class="layui-colla-content layui-show" style="width: 96%;height:50%;">
                        <div id="box5" style="width: 50%;height:100%;float: left;margin-left: 5%"></div>
                    </div>
                </div>
            </div>
        </div>
        <%--==========================--%>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">仓库组员(采购)业绩排行</h2>
            <div class="layui-colla-content layui-show">
<%--                <label class="layui-form-label" style="width: 30%">日期范围:</label>--%>
<%--                <div class="layui-input-inline">--%>
<%--                    <input type="text" class="layui-input" name="cpdate" id="test13" placeholder=" 请选择时间 " style="width: 300px">--%>
<%--                </div>--%>

<%--                <div class="layui-input-inline">--%>
<%--                    <button type="button" class="layui-btn" lay-submit=""  id="serachBtn2" style="margin-left: 6px;">立即查询</button>--%>
<%--                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
<%--                </div>--%>
                <div class="layui-colla-item">
                    <div class="layui-colla-content layui-show" style="width: 96%;height:50%;">
                        <div id="box6" style="width: 50%;height:100%;float: left;margin-left: 5%"></div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    Date.prototype.toLocaleStringTomorrow = function() {
        var dateTime=new Date();
        dateTime=dateTime.setDate(dateTime.getDate()+1);
        dateTime=new Date(dateTime);
        var y = dateTime.getFullYear();
        var m = dateTime.getMonth()+1;
        m = m<10?'0'+m:m;
        var d = dateTime.getDate();
        d = d<10?("0"+d):d;
        return y+"-"+m+"-"+d;
    }

    layui.use(['laydate','layer','jquery','element'],function () {
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.$;
        var laydate = layui.laydate;
        var tomorrowTime = (new Date()).toLocaleStringTomorrow();

        //日期选择器
        var value1;
        laydate.render({
            elem: '#test11'
            ,type: 'datetime'
            ,range: true
            ,max:tomorrowTime
            //每次点击清空之前的日期选择
            ,ready:function(){
                value1 = "";
            }
            ,done: function(value) {
                value1 = value;
            }
        });
        var value1;
        laydate.render({
            elem: '#test12'
            ,type: 'datetime'
            ,range: true
            ,max:tomorrowTime
            //每次点击清空之前的日期选择
            ,ready:function(){
                value1 = "";
            }
            ,done: function(value) {
                value1 = value;
            }
        });
        var value1;
        laydate.render({
            elem: '#test13'
            ,type: 'datetime'
            ,range: true
            ,max:tomorrowTime
            //每次点击清空之前的日期选择
            ,ready:function(){
                value1 = "";
            }
            ,done: function(value) {
                value1 = value;
            }
        });
        //根据时间查询
        $("#serachBtn0").on("click",function () {
            if (value1 == "" || value1 == undefined){
                value1 = "";
            }
            showChartFour();
        });

        $("#serachBtn1").on("click",function () {
            if (value1 == "" || value1 == undefined){
                value1 = "";
            }
            showChartFive();
        });

        $("#serachBtn2").on("click",function () {
            if (value1 == "" || value1 == undefined){
                value1 = "";
            }
            showChartSix();

        });

        $(function () {
            value1="";
            showChartFour();
            showChartFive();
            showChartSix();

        })

        var show;
        function tip(a,str) {
            //在你掉接口拿数据去渲染chart图标的时候，渲染数据的时候判断一下
            if(a.length===0){
                show=str;
            }else {
                show='';
            }
        }

        //仓库采购员饼状图
        function  showChartFour(){
            var chartDom = document.getElementById('box4');
            var myChart = echarts.init(chartDom);
            var option;

            option && myChart.setOption(option);
            /*            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画*/
            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行
                url:"${pageContext.request.contextPath}/purchase/statisc/tu4",    //请求发送到TestServlet处
                dataType:"json",
                success : function(result) {
                    tip(result,"您查询的时间范围内暂无图书出版社销售数据");
                    myChart.setOption( {
                        title: {
                            text: '仓库组员(采购)业绩排行',
                            subtext: '仅包含审核通过的订单',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '60%',
                                data:result,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                },
                error : function() {
                    //请求失败时执行该函数
                    layer.msg("图书出版社图表请求数据失败!",{icon:5});
                    myChart.hideLoading();
                }
            });

        };
        //仓库采购员饼状图
        //出库表
        function showChartFive() {
            var myChart = echarts.init(document.getElementById('box5'));
            var show;
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '仓库组员(出库)业绩排行',
                    subtext: '仅包含审核通过的订单'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }]
            });

            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

            var names=[];    //类别数组（实际用来盛放X轴坐标值）
            var nums=[];    //销量数组（实际用来盛放Y坐标值）

            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "${pageContext.request.contextPath}/inStorage/statisc/tu5",    //请求发送到TestServlet处
                success : function(result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
                        for(var i=0;i<result.length;i++){
                            names.push(result[i].pname+" 工号："+result[i].uid);    //挨个取出类别并填入类别数组
                        }
                        for(var i=0;i<result.length;i++){
                            //  nums.push(result[i].productionArrangement.number);    //挨个取出销量并填入销量数组daliy
                            nums.push(result[i].ocount);
                        }

                        //在你掉接口拿数据去渲染chart图标的时候，渲染数据的时候判断一下
                        if(names.length===0 && nums.length===0){
                            show='您查询的时间范围内暂无审核通过的出库数据';
                        }else {
                            show='仅包含审核通过的订单';
                        }

                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({        //加载数据图表
                            title:{
                                subtext:show
                            },
                            xAxis: {
                                data: result.name
                            },
                            series: [
                                {
                                    // 根据名字对应到相应的系列
                                    name: result.name,
                                    data: result.value
                                },
                            ]
                        });

                    }
                },
                error : function() {
                    //请求失败时执行该函数
                    layer.msg("员工出库业绩图表请求数据失败!",{icon:5});
                    myChart.hideLoading();
                }
            });

        };

        //出库表
        function showChartSix() {
            var myChart = echarts.init(document.getElementById('box6'));
            var show;
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '仓库组员(出库)业绩排行',
                    subtext: '仅包含审核通过的订单'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }]
            });

            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

            var names=[];    //类别数组（实际用来盛放X轴坐标值）
            var nums=[];    //销量数组（实际用来盛放Y坐标值）

            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "${pageContext.request.contextPath}/statisc/tu6",    //请求发送到TestServlet处
                success : function(result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
                        for(var i=0;i<result.length;i++){
                            names.push(result[i].pname+" 工号："+result[i].uid);    //挨个取出类别并填入类别数组
                        }
                        for(var i=0;i<result.length;i++){
                            //  nums.push(result[i].productionArrangement.number);    //挨个取出销量并填入销量数组daliy
                            nums.push(result[i].ocount);
                        }

                        //在你掉接口拿数据去渲染chart图标的时候，渲染数据的时候判断一下
                        if(names.length===0 && nums.length===0){
                            show='您查询的时间范围内暂无审核通过的出库数据';
                        }else {
                            show='仅包含审核通过的订单';
                        }

                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({        //加载数据图表
                            title:{
                                subtext:show
                            },
                            xAxis: {
                                data: result.name
                            },
                            series: [
                                {
                                    // 根据名字对应到相应的系列
                                    name: result.name,
                                    data: result.value
                                },
                            ]
                        });

                    }
                },
                error : function() {
                    //请求失败时执行该函数
                    layer.msg("员工出库业绩图表请求数据失败!",{icon:5});
                    myChart.hideLoading();
                }
            });

        };


    });

</script>
</html>